<template>
  <div class="left-sidebar">
    <i :style="{backgroundImage: 'url(' + data.icon + ')'}"></i>
    <h2>{{data.name}}</h2>
    <p class="number">{{number}}</p>
    <p class="make"><i class="iconfont icon-shoucang"></i>收藏游戏</p>
    <a v-if="data.download_number" :href="data.link" class="android"><i class="iconfont icon-anzhuo"></i>PC安卓版下载</a>
    <a v-if="data.download_number" :href="data.link" class="ios"><i class="iconfont icon-pingguo"></i>PC苹果版下载</a>
    <a v-if="!data.download_number" :href="data.link" class="h5"><i class="iconfont icon-diannao"></i>电脑玩</a>
    <img :src="data.qrCode" alt="扫一扫，通过手机打开" title="扫一扫，通过手机打开">
    <ul>
      <li v-if="data.size"><span>大小</span>{{data.size}}M</li>
      <li><span>类型</span>{{data.type}}</li>
      <li v-if="data.system"><span>系统</span>{{data.system}}</li>
      <li><span>语言</span>{{data.language}}</li>
      <li><span>版本</span>{{data.version}}</li>
      <li><span>更新</span>{{data.update}}</li>
      <li><span>厂商</span>{{data.cp}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object
    }
  },
  computed: {
    number: function() {
      return this.data.download_number ? `下载${this.data.download_number}` : `玩家${this.data.user_number}`
    }
  }
}
</script>

<style lang="less" scoped>
.left-sidebar {
  padding: 20px 30px;
  box-shadow: 1px 1px 10px 1px #eee;
  width: 175px;
  overflow: hidden;
  background: #fff;
  float: left;
  // transition: all 0.1s;
  // -webkit-transition: all 0.1s;
  // -moz-transition: all 0.1s;
  // -o-transition: all 0.1s;
  & > i {
    display: block;
    width: 165px;
    height: 165px;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: 100%;
  }
  & > h2 {
    color: #010101;
    line-height: 52px;
    text-align: center;
  }
  .number {
    display: block;
    color: #ffa93a;
    text-align: center;
    font-size: 14px;
  }
  .make {
    display: block;
    color: #2cd0ff;
    line-height: 52px;
    text-align: center;
    border-bottom: 1px dashed #eee;
    font-size: 14px;
    margin-bottom: 20px;
    i {
      font-size: 20px;
      vertical-align: middle;
      margin: 0 3px;
    }
  }
  & > a {
    display: block;
    line-height: 42px;
    text-align: center;
    border-radius: 20px;
    margin-bottom: 16px;
    color: #fff;
    font-size: 14px;
  }
  .h5 {
    background: #88d42f;
    i {
      font-size: 20px;
      margin-right: 10px;
      vertical-align: middle;
    }
  }
  .android {
    background: #88d42f;
    i {
      font-size: 20px;
      margin-right: 10px;
      vertical-align: middle;
    }
  }
  .ios {
    background: #2cd0ff;
    i {
      font-size: 22px;
      margin-right: 10px;
      vertical-align: sub;
    }
  }
  img {
    width: 175px;
    height: 175px;
    display: block;
    margin: 0 auto 20px;
  }
  ul {
    border-top: 1px dashed #eee;
    padding-top: 10px;
    li {
      padding-left: 46px;
      line-height: 34px;
      color: #333;
      font-size: 14px;
      position: relative;
      font-weight: 600;
    }
    span {
      position: absolute;
      left: 0;
      top: 0;
      line-height: 34px;
      text-align: center;
      width: 46px;
      color: #aeaeae;
      font-size: 14px;
    }
  }
}
</style>


